<template lang="pug">
.login
  img.login__logo(src="/static/logo.jpg")
  .login__form
    .login__account
      img(src="/static/person.svg")
      i.iconfont.icon-straight_arrow_right
      input(
        type="text",
        v-model="account",
      )
    .login__password
      img(src="/static/lock.svg")
      i.iconfont.icon-straight_arrow_right
      input(
        type="password",
        v-model="password",
      )
    .login__button(@click="login") Login In
</template>

<script>
import axios from "axios"
import { format4backend } from "utils"

export default {
  data() {
    return {
      account: "",
      password: "",
    }
  },
  methods: {
    login() {
      axios
        .post(
          "/signin",
          format4backend({
            username: this.account,
            password: this.password,
          }),
        )
        .then(res => {
          this.$store.commit("SET_USER", res.data)
          this.$router.push("/campaign-list")
        })
        .catch(e => {
          this.$store.commit("SET_USER", null)
        })
    },
  },
}
</script>

<style lang="stylus">
.login
  display: flex
  justify-content: center
  align-items: center
  height: 100vh

.login__logo
  width: 200px
  margin-right: 200px

.login__form
  width: 400px
  height: 350px
  background: #fafafa
  border-radius: 10px
  border: solid 1px rgba(245, 166, 35, 0.12)
  box-sizing: border-box
  padding: 50px

.login__account
.login__password
  display: flex
  align-items: center
  border-bottom: 1px solid #c8c8c8
  margin-top: 30px
  > img
    margin-right: 15px
    width: 20px
  > input
    padding: 10px
    letter-spacing: 1px
    background-color: #fafafa
    border: none
    font-size: 20px
    color: #5e5e5e
    &:focus
      outline: none
    &:-webkit-autofill
      transition: background-color 5000s ease-in-out 0s

.login__button
    background #f5a623
    margin-top: 50px
    padding-top: 10px
    padding-bottom: 10px
    text-align: center
    letter-spacing: 2px
    color: #fff
    font-size: 16px
    border-radius: 16px
    cursor: pointer
</style>
